
<template>
  <div class="login">
    <!-- 导航栏 -->
    <van-nav-bar title="黑马头条-登陆" />
    <!-- 表单部分 -->
    <van-form ref="loginForm">
      <van-field
        v-model="mobile"
        label="手机号"
        placeholder="请输入手机号"
        required
        :rules="[ { required: true, message: '手机号不能为空', trigger: 'onBlur' },
          { validator: mobileValidator, message: '手机号必须为11位数字', trigger: 'onBlur' },]"
      />
      <van-field
        v-model="code"
        label="密码"
        placeholder="请输入密码号"
        required
        :rules="[{ required:true, message: '请输入内容',trigger:'onBlur'}]"
      />
    </van-form>
    <!-- 登陆按钮 -->
    <div class="btn-wrap">
      <van-button type="info" class="btn" @click="doValidator">登陆</van-button>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/user.js'

export default {
  name: 'login',
  created () {
  },
  data () {
    return {
      mobile: '13912345678',
      code: '246810'
    }
  },
  methods: {
    hLogin () {
      const data = { mobile: this.mobile, code: this.code }
      login(data).then(res => {
        // console.log(res)
        this.$store.commit('setToken', res.data.data)
        // getUserInfo()
        // this.$router.push('/')
        if (this.$route.query.backto) {
          // this.$router.push({
          //   path: this.$route.query.backto
          // })
          this.$router.push(this.$route.query.backto)
        } else {
          this.$router.push('/')
        }
      }).catch(e => console.log(e.message))
    },
    mobileValidator (value) {
      return /1\d{10}/.test(value)
    },
    doValidator () {
      // getUserInfo()
      // console.log(this.$refs.loginForm.validate())res
      this.$refs.loginForm.validate().then(() => {
        // console.log(res)
        this.hLogin()
      }
      ).catch(() => console.log('表单校验失败'))
    }
  }
}
</script>

<style scoped lang="less">
.login {
    .btn-wrap {
      padding:20px;
      .btn {
        width: 100%;
        background-color: #6db4fb;
        color: #fff;
      }
    }
}
</style>
